var page={
    pageNum:1,
    pageSize:10,
    pages:0
}
$(function () {
    getData(page)
});


function getData(p) {
    $('tbody').empty()

    $axios.doGet('city',p).then(res=>{
        $.each(res.list, function (i, city) {
            $('tbody').append(
                `
                            <tr>
                                <td>${city.cityId}</td>
                                <td>${city.aaa}</td>
                                <td>${city.country.country}</td>
                                <td>${city.lastUpdate}</td>
                            </tr>
                        `
            )
        });
        pageNum=res.pageNum
        pages=res.pages
        $('#pageNum').text(res.pageNum)
        $('#pages').text(res.pages)
        $('#nav').empty()
        $.each(res.navigatepageNums, function (i, e) {
            $('#nav').append(`<a href="#" onclick="return pageChange(${e})">${e}</a>`)
        });
    })
}

function pageChange(index) {
    if(index>0){
        page.pageNum=index
    }else{
        switch (index){
            case -1:
                page.pageNum=1
                break;
            case -2:
                page.pageNum=pageNum-1
                break;
            case -3:
                page.pageNum=pageNum+1
                break;
            case -4:
                page.pageNum=pages
                break;
        }
    }
    page.pageSize=$('[name=pageSize]').val()
    getData(page)
    return false;
}

function onChange() {
    page.pageSize=$('[name=pageSize]').val()
    getData(page)
}

function onSearch() {
    let str = $('form').serialize()

    $axios.doGet('city', Qs.parse(str)).then(res => {
        console.log(res)
    });
    return false
}